<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="c1" width="600" height="400"></canvas>

    <script>
        /** @type {HTMLCanvasElement} */
        // 画布
        let c1 = document.getElementById("c1")
        // 画笔
        let ctx = c1.getContext("2d")

        // 绘制圆弧
        // 圆心坐标，半径，开始角度，结束角度，顺逆时针
        ctx.arc(100, 100, 20, 0, Math.PI)
        ctx.stroke()

        ctx.beginPath()
        // 顺时针为true，默认false
        ctx.arc(0, 0, 20, Math.PI / 2, Math.PI, true)
        // fill会自动填充起始点连线与弧线的交集
        ctx.fill()
       
        /**
         * // 笑脸
        // 头
        ctx.beginPath()
        ctx.arc(200, 200, 50, 0, Math.PI * 2)
        ctx.strokeStyle = "#aaa"
        ctx.stroke()
        // 嘴
        ctx.beginPath()
        ctx.arc(200, 200, 35, Math.PI / 6, Math.PI * 5 / 6)
        ctx.strokeStyle = "#000"
        ctx.stroke()
        // 左眼
        ctx.beginPath()
        ctx.arc(180, 180, 8, 0, Math.PI * 2)
        ctx.fillStyle = "#16d46b"
        ctx.fill()
        // 右眼
        ctx.beginPath()
        ctx.arc(220, 180, 8, 0, Math.PI * 2)
        ctx.fill()
        */
        

        // 笑脸法2
        // 头
        ctx.beginPath()
        ctx.arc(200, 200, 50, 0, Math.PI * 2)
        ctx.moveTo(228,220)
        // 嘴
        ctx.arc(200, 200, 35, Math.PI / 6, Math.PI * 5 / 6)
        ctx.moveTo(188,180)
        // 左眼
        ctx.arc(180, 180, 8, 0, Math.PI * 2)
        ctx.moveTo(228,180)
        // 右眼
        ctx.arc(220, 180, 8, 0, Math.PI * 2)
        ctx.stroke()
        ctx.closePath()
    </script>
</body>

</html>